<template>
  <div>
    {{ $route.query.id }}
    <!--   视屏下 增加题库  标题部分-->
    <div class="title">
      <div class="title-item">
        <span class="icon">{{ list.errorsTotal }}</span
        ><span class="text">错题</span>
      </div>

      <div class="title-item">
        <span class="icon">{{ list.collectsTotal }}</span
        ><span class="text">收藏</span>
      </div>

      <div class="title-item">
        <span class="icon">{{ list.notesTotal }}</span
        ><span class="text">笔记</span>
      </div>
    </div>
    <!--     tab -->
    <van-tabs v-model="activeName">
      <van-tab title="章节练习" name="a">
        <div class="warp">
          <van-cell-group>
            <!-- 小循环 -->
            <div
              class="loopthree"
              v-for="(item, index) in list.sectionList || null"
              :key="index"
            >
              <van-cell
                :title="item.title"
                :value="'¥' + item.price"
                :label="'共' + item.totality + '题 已做' + item.cont + '题'"
              />
              <div class="free">
                <van-button
                  v-if="item.free == '0.00'"
                  plain
                  hairline
                  type="primary"
                  size="mini"
                  round
                  @click="
                    $router.push({
                      path: '/testPritise',
                      query: {
                        id: item.id,
                        title: item.title,
                      },
                    })
                  "
                  >免费做题</van-button
                >
                <van-button
                  style="float: right"
                  type="danger"
                  @click="
                    $router.push({
                      path: '/Buytest',
                      query: {
                        id: item.id,
                        title: item.title,
                      },
                    })
                  "
                  v-else
                  plain
                  hairline
                  size="mini"
                  round
                  >立即购买</van-button
                >
              </div>
            </div>
            <!-- 小循环结束 -->
          </van-cell-group>
        </div>
      </van-tab>
      <van-tab title="模拟考试" name="b">
        <div class="warp">
          <van-cell-group>
            <div
              class="loopthree"
              v-for="(item, index) in list.simulateList || null"
              :key="index"
            >
              <van-cell
                :title="item.title"
                :value="'¥' + item.free"
                :label="
                  '作答时间： ' +
                  item.mins +
                  '总分： ' +
                  item.total_points +
                  '分'
                "
              />
              <div class="free">
                <van-button
                  class="fr"
                  v-if="(item.free === '0.00')"
                  plain
                  hairline
                  type="primary"
                  size="mini"
                  round
                  @click="
                    $router.push({
                      path: '/moniTest',
                      query: {
                        id: item.id,
                        title: item.title,
                      },
                    })
                  "
                  >免费做题</van-button
                >

                <van-button
                  v-else
                  plain
                  hairline
                  size="mini"
                  round
                  style="float: right;marginTop:6px"
                  type="danger"
                  @click="
                    $router.push({
                      path: '/Buytest',
                      query: {
                        id: item.id,
                        title: item.title,
                      },
                    })
                  "
                  >立即购买</van-button
                >
              </div>
            </div>
          </van-cell-group>
        </div>
      </van-tab>
      <van-tab title="历年真题" name="c">
        <div class="warp">
          <van-cell-group>
            <div
              class="loopthree"
              v-for="(item, index) in list.calendarList || null"
              :key="index"
            >
              <van-cell
                :title="item.title"
                :value="'¥' + item.free"
                :label="
                  '作答时间： ' +
                  item.mins +
                  '总分： ' +
                  item.total_points +
                  '分'
                "
              />
              <div class="free">
                <van-button
                  v-if="(item.price === '0.00')"
                  plain
                  hairline
                  type="primary"
                  size="mini"
                  round
                  @click="
                    $router.push({
                      path: '/canlendarTest',
                      query: {
                        id: item.id,
                        title: item.title,
                      },
                    })
                  "
                  >免费做题</van-button
                >
                <van-button
                  v-else
                  plain
                  hairline
                  style="float: right"
                  type="danger"
                  @click="
                    $router.push({
                      path: '/Buytest',
                      query: {
                        id: item.id,
                        title: item.title,
                      },
                    })
                  "
                  size="mini"
                  round
                  >立即购买</van-button
                >
              </div>
            </div>
          </van-cell-group>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { tikuData } from "@/api";
export default {
  data() {
    return {
      activeName: 0,
      list: {},
      /*       //章节练习
      sectionList: this.list.sectionList,
      //模拟考试
      simulateList: this.list.simulateList,
      //历年真题
      calendarList: this.list.calendarList, */
    };
  },
  created() {
    this.getlist1();
  },

  methods: {
    async getlist1() {
      // console.log(this.queryData)
      try {
        console.log(this.$route.query.id);
        const { data: res } = await tikuData(
          { bankId: this.$route.query.id, uid: this.$store.state.uid }

          // this.$route.query.id
        );
        console.log(res.data, "题库");
        this.list = res.data;
        console.log(this.list);
    
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  width: 375px;
  height: 128px;
  background-color: #0486fe;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .title-item {
    display: flex;
    flex-direction: column;
    .icon {
      color: #fff;
      font-size: 26px;
      font-weight: 600;
      text-indent: 4px;
    }
    .text {
      color: #fff;
      font-weight: normal;
    }
  }
}

.title_three {
  font-size: 24px;
  color: #fff;
}
.loopthree{
  margin-bottom: 10px;
  overflow: hidden;
}
.free {
  height: 44px;
  .van-button--plain.van-button--primary {
    margin-top: 10px;
    margin-right: 5px;
    color: #1c90fe;
    border: #0486fe;
    float: right;
  }
}
 
.van-cell-group {
  border-radius: 16px;
}
.warp {
  padding: 20px 20px 0;
  height: 500px;
  background-color: #efeff4;
}

.van-cell-group{
background-color: #efeff4;
.free{
   .van-button{
     margin-top: 10px;
    margin-right: 5px;

   }
  background-color: #fff;
}
}
</style>
